<template>
	<view class="message—record">
		<view class="topView">
			<view class="timeView">
				<wu-calendar color="#6ac695" :item-height=50 type="week" start-week="mon" ref="calendar"
					@change="calendarConfirm" :insert="true" :fold="false"></wu-calendar>
			</view>
		</view>

		<view class="list" v-if="dataList.length">
			<y-time-line>
				<y-time-line-item class="rowItem" v-for="(item,index) in dataList" :key="item.id"
					:showLine="dataList.length-1===index?false:true">
					<view class="time">
						{{timestampToTime(item.createTime)}}
					</view>
					<view class="content">
						{{getDeviceStatus(item.type)}}
					</view>
				</y-time-line-item>
			</y-time-line>
		</view>
		<view class="loadingLayOut" v-if="dataList.length || noData">
			<uni-load-more :status="noData?'noMore':'loading'"></uni-load-more>
		</view>
		
		<view class="no-record" v-show="dataList.length == 0">
			<image class="no-record-img" src="../../static/device/no_track_record.png">
		
			</image>
			<view class="no-record-text">{{$t('messageRecord.noData')}}</view>
		</view>

	</view>
</template>
<!-- {{item.duration}}分钟 -->
<script setup>
	import { apiGetDeviceMsgList } from '../../api/device_api';
	import { timestampToTime,getCurrentDate } from '../../utils/time';
	import{onLoad,onReachBottom} from "@dcloudio/uni-app";
	import { getDeviceStatus } from '../../utils/device_status';
	import { ref } from 'vue';
	import { i18nTool } from '../../utils/i18en';
import { getImei } from '../../utils/user_tools';
	const day = ref(getCurrentDate());
	const dataList = ref([]);
	const imei = getImei();
	
	const noData = ref(false);
	var param = {
		pageSize:20,
		pageIndex:1,
		imei:imei,
	};
	onLoad(()=>{
		param.day = day.value;
		getMsgList();
		uni.setNavigationBarTitle({
			title:i18nTool('messageRecord.navTitle')
		})
	})
	onReachBottom(()=>{
		if(noData.value) return;
		param.pageIndex++;
		getMsgList();
	});
	
	const getMsgList = async()=>{
		let res = await apiGetDeviceMsgList(param);
		dataList.value = [...dataList.value ,...res.content];//拼接数组  并展开
		noData.value = res.lastPage;
	}
	
	const calendarConfirm =(e) =>{
		day.value = e.fulldate;
		param.day = day.value;
		dataList.value.length = 0;
		param.pageIndex = 1;
		getMsgList();
	}

</script>

<style lang="scss" scoped>
	.message—record {
		padding-top: 280rpx;

		.topView {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			height: 280rpx;
			z-index: 3;
			background-color: #fff;

			.timeView {
				margin: 20rpx 30rpx;
				box-sizing: border-box;
				box-shadow: 0px 0px 10rpx rgba(0, 0, 0, 0.1);
				height: 250rpx;
				background-color: #f9f9f9;
				border-radius: 10rpx;
			}
		}

		.list {
			position: relative;
			padding: 30rpx 30rpx;

			.rowItem {
				display: flex;
				justify-content: start;

				.time {
					padding-left: 50rpx;
					color: #666;
					font-size: 20rpx;
				}

				.content {
					padding-left: 50rpx;
					color: #333;
					font-size: 26rpx;
				}
			}


		}
		.no-record {
			background-color: #fff;
			position: fixed;
			bottom: 0;
			top: 270rpx;
			left: 0;
			right: 0;
			display: flex;
			justify-content: center;
			flex-direction: column;
			align-items: center;
			z-index: 100000;
		
			.no-record-img {
				width: 100rpx;
				height: 100rpx;
			}
		
			.no-record-text {
				font-size: 26rpx;
				color: #666;
			}
		
		
		}
	}
</style>